import React from 'react'
import { View, StyleSheet, Text } from 'react-native'
import Icon from 'react-native-vector-icons/AntDesign'

interface Props{
  label: string;
  style?: object;
  icon?: string | null;
}

export default class Page extends React.Component<Props> {
  public static defaultProps = {
    icon: 'right'
  }

  public render (): JSX.Element {
    let icon
    if (this.props.icon) {
      icon = <Icon name={this.props.icon} />
    }
    return (
      <View style={[styles.border, this.props.style]}>
        <Text>{this.props.label}</Text>
        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
          {this.props.children}
          {icon}
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  border: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  }
})
